<template>
  <div ref="safetyMeetingsAdd" class="_wz_safetyMeetingsAdd">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="90" :rules="ruleValidate">
      <Row>
        <i-col span="8">
          <FormItem label="运输企业" prop="deptUuid">
            <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" :label-in-value="true" @on-change="deptNameFun" clearable>
              <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
            </i-select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="会议时间" prop="wzMeetingDate">
            <DatePicker type="date" placeholder="请选择会议时间" style="width: 100%;" split-panels v-model="formData.wzMeetingDate"></DatePicker>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="会议地点" prop="meetingSite">
            <i-input v-model="formData.meetingSite" placeholder="请填写会议地点" clearable/>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="主持人" prop="meetingEmcee">
            <i-input v-model="formData.meetingEmcee" placeholder="请填写主持人" clearable/>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="记录人" prop="meetingRecorder">
            <i-input v-model="formData.meetingRecorder" placeholder="请填写记录人" clearable/>
          </FormItem>
        </i-col>
        <i-col span="8">
        </i-col>
        <i-col span="24">
          <i-col span="12">
            <FormItem label="会议照片" prop="meetingImg">
              <Upload name="meetingImgFile" :before-upload="meetingImgFileFun" action="">
                <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
              </Upload>
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;" v-if="!!meetingImgFile.imgUrl">
                  <img :src="meetingImgFile.imgUrl" @error="public.imgDispose">
                </viewer>
              </div>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="会议照片" prop="meetingImgSecond">
              <Upload name="meetingImgSecondFile" :before-upload="meetingImgSecondFileFun" action="">
                <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
              </Upload>
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;" v-if="!!meetingImgSecondFile.imgUrl">
                  <img :src="meetingImgSecondFile.imgUrl" @error="public.imgDispose">
                </viewer>
              </div>
            </FormItem>
          </i-col>
        </i-col>
      </Row>

      <FormItem label="参加人员" prop="meetingJoinPersonnel">
        <i-input v-model="formData.meetingJoinPersonnel" placeholder="请填写参加人员" type="textarea" :autosize="{minRows: 5,maxRows: 5}"/>
      </FormItem>
      <FormItem label="会议纪要" prop="meetingContent">
        <i-input v-model="formData.meetingContent" placeholder="请填写会议纪要" type="textarea" :autosize="{minRows: 5,maxRows: 5}"/>
      </FormItem>
      <FormItem label="备注" prop="remark">
        <i-input v-model="formData.remark" placeholder="备注" type="textarea" :autosize="{minRows: 5,maxRows: 5}"/>
      </FormItem>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="formOperationFun">取消</Button>
        <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
      </div>
    </Form>

  </div>
</template>
<script>
  export default {
    //modify 修改 add 新增
    // 需要修改的数据  表单类型  打开方式
    props: ["selectdata", 'dataType'],//接收来自父组件的数据
    data() {
      return {
        meetingImgFile: {
          data: null,
          imgUrl: ''
        },
        meetingImgSecondFile: {
          data: null,
          imgUrl: ''
        },
        subDeptList: [],//运输企业
        formData: {},//表单数据
        ruleValidate: {//正则
          deptUuid: [
            {required: true, message: '请选择运输企业', trigger: 'blur'}
          ],
          wzMeetingDate: [
            {type: "date", required: true, message: '请选择会议时间', trigger: 'blur'},
          ],
          meetingSite: [
            {required: true, message: '请填写会议地点', trigger: 'blur'}
          ],
          meetingEmcee: [
            {required: true, message: '请填写主持人', trigger: 'blur'}
          ],
          meetingRecorder: [
            {required: true, message: '请填写记录人', trigger: 'blur'}
          ],
        },
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;

      //运输企业
      that.axios.get(that.apiUrl.subDeptList)
      .then(res => {
        if (!!res) {
          that.subDeptList = res.data.list;
          if (!!!that.formData.deptUuid) {
            that.formData.deptUuid = that.subDeptList[0].uuid;
            that.formData.deptName = that.subDeptList[0].deptName;
          }
        }
      }).catch(err => {
        console.log("失败", err)
      })


      if (!!!that.selectdata) {
        that.formData = {};//表单
      } else {
        var data = JSON.parse(JSON.stringify(that.selectdata));//表单
        data.wzMeetingDate = new Date(data.meetingDate);
        that.formData = data;//表单
        that.meetingImgFile.imgUrl = !!that.formData.meetingImg ? that.apiUrl.imgUrl + that.formData.meetingImg : '';
        that.meetingImgSecondFile.imgUrl = !!that.formData.meetingImgSecond ? that.apiUrl.imgUrl + that.formData.meetingImgSecond : '';
      }


    },
    methods: {//执行的方法
      //提交表单
      addSubmit(data) {
        var that = this;
        that.$refs[data].validate((valid) => {
          if (valid) {//正则判断使用
            var data = that.formData;
            var formData = new FormData();
            //会议图片1
            !!that.meetingImgFile.data ? formData.append('meetingImgFile', that.meetingImgFile.data) : "";
            //会议图片2
            !!that.meetingImgSecondFile.data ? formData.append('meetingImgSecondFile', that.meetingImgSecondFile.data) : "";

            //会议时间
            !!data.wzMeetingDate ? data.meetingDate = that.public.timeFormatting(data.wzMeetingDate, "yyyy-MM-dd") : '';

            for (var key in data) {
              if (!!data[key]) {
                formData.append(key, data[key]);
              }
            }
            if (!!!that.selectdata) {
              //会议类别（1：安全生产领导小组例会，2：安全生产工作会议）
              formData.append('meetingType', that.dataType);
            }

            that.$Spin.show();//显示加载
            that.axios.post(that.apiUrl.safetyMeetingRecordSaveOrUpdate, formData, {headers: {'Content-Type': "application/x-www-form-urlencoded"}})
            .then(res => {
              that.$Spin.hide();
              if (!!res) {
                that.$Message.success("数据保存成功");
                that.$emit("closeFun", true)
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {
            that.$Message.error('请正确填写表单');
          }
        })
      },
      //表单关闭
      formOperationFun() {
        this.$emit("closeFun", false)
      },
      //会议图片1
      meetingImgFileFun(file) {
        var that = this;
        var type = file.type.split("/")[0];
        if (type == "image") {//图片
          that.meetingImgFile.imgUrl = window.URL.createObjectURL(file);
          that.meetingImgFile.data = file;
        } else {
          that.$Message.error('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
      //会议图片2
      meetingImgSecondFileFun(file) {
        var that = this;
        var type = file.type.split("/")[0];
        if (type == "image") {//图片
          that.meetingImgSecondFile.imgUrl = window.URL.createObjectURL(file);
          that.meetingImgSecondFile.data = file;
        } else {
          that.$Message.error('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
      deptNameFun() {
        if (!!e) {
          this.formData.deptName = e.label;
        } else {
          this.formData.deptName = "";
        }
      },

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less" scoped>
  ._wz_safetyMeetingsAdd {
    .demo-drawer-footer {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 1px solid #e8e8e8;
      padding: 10px 16px;
      text-align: right;
      background: #fff;
    }


    .demo-upload-list {
      display: inline-block;
      width: 200px;
      height: 140px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin-right: 4px;

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          color: #fff;
          font-size: 40px;
          cursor: pointer;
          margin: 0 2px;
        }
      }
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }
  }


</style>
